<template>
  <div class="about">
    <input type="text" name="" id="" v-model="context">
    {{context}}
  </div>
</template>
<script>
import { customRef } from 'vue'
export default {
  setup() {
    function myRef(value,delay){
      let time=null
      return customRef((track, trigger)=>{
        return {
          get(){
            track()//追踪数据
            console.log('有人在读取context值');
            return value
          },
          set(newValue){
            clearTimeout(time)
            time=setTimeout(()=>{
              value=newValue
              trigger() //通知vue重新解析模板从而调用get方法获取最新值
            },delay)
            
          }
        }
      
      })
    }
    let context=myRef("hello",1000)
    return {
      context
    }
  },
}
</script>
